<template>
	<div class="home">
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">{{title}}</h1>
		</header>
		<section class="mui-content">
			<homePanel></homePanel>
			<phonePanel></phonePanel>
			<emailPanel></emailPanel>	
		</section>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#home" @tap="home">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="#phone" @tap="phone">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">电话</span>
			</a>
			<a class="mui-tab-item" href="#email" @tap="email">
				<span class="mui-icon mui-icon-email" @tap="email"></span>
				<span class="mui-tab-label">邮件</span>
			</a>
			<a class="mui-tab-item" href="#setting" @tap="setting">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</a>
		</nav>
	</div>
</template>

<script>
	export default {
		name: "home",
		data() {
			return {
				menuIdx: "home",
				title: "首页"
			}
		},
		methods: {
			home() {
				this.title = "首页";
			},
			phone() {
				this.title = "电话";
			},
			email() {
				this.title = "邮件";
			},
			setting() {
				this.$router.push("/setting");
			}
		},
		components: {
			homePanel: require("./view/index.vue"),
			phonePanel: require("./view/phone.vue"),
			emailPanel: require("./view/email.vue")
		},
		created() {

		}
	}
</script>

<style>

</style>